<script lang="ts" setup>
import {computed, reactive, ref, watch,onMounted} from 'vue'
import {useUserStore} from '@/stores/user'
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

interface Goods {
  gid:number
  img:string
  title:string
  tags:object
  price:number
  amount:number
  checked:boolean
}
interface Shop {
  shopId: number
  shopName: string
  goods: Goods[]
  checked:boolean
}
const cartData=useUserStore().getCart()

function subCount(index1,index2):void {
  if(cartData.value[index1].goods[index2].amount>1)
    cartData.value[index1].goods[index2].amount--
}
function addCount(index1,index2):void {
  if(cartData.value[index1].goods[index2].amount<999)
    cartData.value[index1].goods[index2].amount++
}


const cacheCart=computed(()=>{
  //对cartData进行深拷贝
  return JSON.parse(JSON.stringify(cartData.value))
})

watch(cacheCart,(newCart,oldCart)=>{
  // 监听新值
  cartData.value.forEach((shop,index1)=>{
    let checkCount=0
    shop.goods.forEach((goods,index2)=>{
      if(newCart[index1].checked&&!oldCart[index1].checked){
        goods.checked=true
      }
      if(!newCart[index1].checked&&oldCart[index1].checked){
        goods.checked=false
      }
      if(goods.checked){
        checkCount++
      }
    })
    shop.checked = checkCount === shop.goods.length;
    //if(!shop.checked)allChecked.value=false
  })
},{
  deep:true
})
const allChecked=ref<boolean>(false)

watch(allChecked,(newValue,oldValue)=>{
  cartData.value.forEach((shop,index)=>{
    shop.checked=newValue
  })
})

function delGoods(index1,index2) {
  if(cartData.value[index1].goods.length>1){
    cartData.value[index1].goods.splice(index2,1)
  }else{
    cartData.value.splice(index1,1)
  }

}
function delAll() {
  if(allChecked.value)
    cartData.value=[]
  allChecked.value=false
}

const total=computed(()=>{
  let t=0
  cartData.value.forEach((shop,index)=>{
    shop.goods.forEach((goods,index)=>{
      t+=goods.checked?goods.price*goods.amount:0
    })
  })
  return t.toFixed(2)
})

const goodsCount=computed(()=>{
  let count=0
  cartData.value.forEach((shop)=>{
    shop.goods.forEach((goods)=>{
      if(goods.checked) count++
    })
  })
  return count
})

function toGoodsDetail(gid) {
  router.push(`/detail/${gid}`)
}


function addUp() {
  const checkedData=ref([])
  checkedData.value=JSON.parse(JSON.stringify(cartData.value))
  checkedData.value.forEach((shop,index)=>{
    //let isHaveGoods=false
    shop.goods=shop.goods.filter(item=>item.checked===true)
    shop.notes=''
    if(shop.goods.length===0){
      checkedData.value.splice(index,1)
    }
  })
  //console.log(checkedData.value)
  if(checkedData.value.length===0){
    ElMessage({
      type:'warning',
      message:'请选择要结算的商品'
    })
  }else{
    router.push({
      name:'userOrder',
      params:{
        goods:JSON.stringify(checkedData.value),
        address:''
      }
    })
  }

}

</script>

<template>
<div class="panel">
  <div class="header">
    <el-checkbox v-model="allChecked" label="全选" size="large" style="margin-right: 10px" />
    <el-button >移入收藏</el-button>
    <el-button @click="delAll">删除</el-button>
  </div>

  <el-empty v-show="cartData.length===0" description="空空如也"></el-empty>

  <div class="list">
    <div class="shop" v-for="(shop,index1) in cartData" :key="shop.shopId">
      <div class="shopTitle">
        <el-checkbox v-model="shop.checked" size="large"></el-checkbox>
        <span style="margin-left: 10px">{{ shop.shopName }}</span>
      </div>
      <div class="goods" v-for="(goods,index2) in shop.goods" :key="goods.gid">
        <el-checkbox v-model="goods.checked" size="large" style="margin-top: 30px"></el-checkbox>
        <img :src="goods.img" style="width: 100px;height: 100px;margin-left: 10px;" alt="">
        <div style="width: 200px;height:100%;margin-left: 10px">
          <span class="goodsTitle" @click="toGoodsDetail(goods.gid)">{{goods.title}}</span>
          <br>
          <el-tag v-for="tag in goods.tags">{{tag}}</el-tag>
        </div>
        <div style="width: 100px;height:100%;display:flex;justify-content: center">
          <el-tag type="warning">默认规格</el-tag>
        </div>
        <div style="width: 200px;height:100%;display:flex;justify-content: center">
          <span style="font-size: 14px;color: #ff5000">￥</span>
          <span style="font-size: 16px;color: #ff5000">{{ goods.price }}</span>
        </div>
        <div style="width: 150px;height:100%;">
          <el-input v-model="goods.amount" style="width: 130px;">
            <template #prepend><el-button @click="subCount(index1,index2)">-</el-button> </template>
            <template #append><el-button @click="addCount(index1,index2)">+</el-button> </template>
          </el-input>
        </div>
        <div style="width: 150px;height:100%;">
          <span class="optionGroup">移入收藏</span><br>
          <span class="optionGroup" @click="delGoods(index1,index2)">删除</span>
        </div>
      </div>
      <div style="width: 100%;height: 1px;background-color: rgba(210,210,210,0.62)"></div>
    </div>
  </div>

  <div class="footer" v-show="cartData.length>0">
    <span>合计</span>
    <span style="font-size: 18px;color: #ff5000">￥</span>
    <span style="font-size: 20px;color: #ff5000">{{total}}</span>
    <el-button style="background-color: #ff5000;
    color: white;
    width: 200px;
    height: 40px;
    float: right" @click="addUp">结算{{goodsCount>0?'('+goodsCount+')':''}}</el-button>
  </div>

</div>
</template>

<style scoped lang="less">
.panel{
  width: 990px;
  min-height: 500px;
  height: auto;
  background-color: white;
  border-radius: 10px;

  padding: 20px;
}

.header{
  width: 100%;
  height: 60px;
  padding: 10px;
  background-color: rgba(231, 233, 234, 0.65);
  border-radius: 10px;
}

.footer{
  width: 100%;
  height: 60px;
}
.list{
  padding: 10px;
}
.optionGroup:hover{
  cursor: pointer;
  color: #39bf3e;
}

.goodsTitle:hover{
  cursor: pointer;
  color: #409EFF;
}

.goods{
  width: 100%;
  height: 130px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
</style>